<template>
  <div>
        <div class="rightTop">
          车辆报警|胎压监测系统报警
        </div>
        <div class="rightMiddle">
              <div class="date">
                <div class="dateText">时间段 : </div>
                <div class="datePicker">
                    <el-date-picker
                        v-model="PDate"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD" 
                        value-format="YYYY-MM-DD"
                        style="width: 14vw;"
                        @change="getDate"
                    />
                </div>
              </div>
              <div class="mobile">
                 <div class="mobileText"> 设备号：</div>
                  <div class="mobileInput">
                    <el-select v-model="clientId" filterable placeholder="请选择或输入设备号" @change="changeClientId" >
                        <el-option
                            v-for="item in list"
                            :key="item"
                            :label="item"
                            :value="item"
                            />
                    </el-select>
                  </div>
              </div>
              <div class="select">
                  <el-button type="primary" @click="getClientId">查询</el-button>
              </div>
              
        </div>
         <div class="rightBottom"> 
          <div style="background: linear-gradient(90deg,#00BAFF 0%,#8feece 100%);height:3vh;color: #fff;line-height: 3vh;margin-top: 10px;"></div>
          <el-table :data="tableData"  border highlight-current-row >
                    <el-table-column prop="No" label="序号" width="80" align="center"/>
                    <el-table-column prop="mobileNo" label="设备号" width="119" align="center"/>
                    <el-table-column prop="alarmTime" label="报警时间" width="200" align="center"/>
                    <el-table-column prop="ts" label="记录时间" width="200" align="center"/>
                    <el-table-column prop="alarmType" label="报警类型" width="200" align="center"/>
                    <el-table-column prop="alarmLevel" label="报警等级" width="100" align="center"/>
                    <el-table-column prop="speed" label="速度(km/h)" width="140" align="center"/>
                    <el-table-column prop="localtion" label="位置" width="140" align="center"/>
                    <el-table-column prop="attachmentNum" label="文件数量(个)" width="130" align="center"/>
                    <el-table-column prop="urlss" label="图片" width="200" align="center"/>
                    <el-table-column prop="name" label="操作" width="110" align="center">
                      <template #default="{row}">
                        <el-button link type="primary" size="small" @click="delete" style="color:#fff;" disabled>删除</el-button>
                        <el-button prop="downurl" link type="primary" size="small" @click="startDownload(row)" style="color: #fff;">下载</el-button>
                      </template>
                    </el-table-column>                  
          </el-table>
          <div class="pagination">
                      <el-pagination
                        v-model:current-page="currentPage"
                        v-model:page-size="pageSize"
                        layout="sizes, prev, pager, next"
                        :page-sizes="[8, 10, 15,17]"
                        :total="total"
                        :background="isBackground"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        next-text="下一页" prev-text="上一页"
                      />
          </div>
       </div>
  </div>
</template>

<script>
import api from "@/api/api";
import manage from "@/components/manage/manage"
import Customizehead from "@/components/Customize-head"
import  ElNotification  from 'element-plus';
export default {
  components: {Customizehead,manage,ElNotification},
  name: '',
  props: {
    
  },
  data: function () {
      return {
        PDate:[],
         list:[],
        //下拉框选中的设备号
        clientId:"",
        //表格数据
        tableData:[],
        //每页显示条数
        pageSize: 15,
        //当前页数
        currentPage:1,
        total: 0,
        isBackground:true
     }
    },
      mounted() {
          this.getNowDate();
          this.getCarlist();
      },
      methods: {
      //获取当前日期yy-mm-dd
      getNowDate() {
            const timeOne = new Date()
            const year = timeOne.getFullYear()
            let month = timeOne.getMonth() + 1
            let day = timeOne.getDate()
            month = month < 10 ? '0' + month : month
            day = day < 10 ? '0' + day : day
            this.PDate = [`${year}-${month}-${day}`,`${year}-${month}-${day}`];
      },
      //点击查询
      getClientId(){
        this.getAlarm();
          
      },
      //时间改变
      getDate(val) {
           this.PDate=val;
           
      },
      getAlarm(){
        api.getAlarm(this.clientId,3,this.PDate[0],this.PDate[1],this.currentPage,this.pageSize).then(res=>{
          if(res.code==0){
                    this.total=res.data.total;
                    this.getTable(res.data.list);
                  }
        })
      },
   

      getCarlist() {
            api.getCarsList().then(res => {
              
                this.list=res.data.intersectionList;
            }).catch(err => {
                console.log(err)
            })
        },
      startDownload(row) { 
       var url =row.downurl;
        // 创建一个链接元素
        const link = document.createElement('a');
        link.href = url; // 替换为要下载的文件路径
        link.download = url; // 替换为要下载的文件名
        link.style.display = 'none';
        document.body.appendChild(link);
        // 模拟用户点击链接
        link.click();
        // 移除链接元素
        document.body.removeChild(link);
      },
      delete(raw){
  
      },
      getTable(val){ 
        console.log(val)
        this.tableData = val.map((item,index) => {

    
              return {
                mobileNo:this.clientId,
                No: this.pageSize*(this.currentPage-1)+index + 1,
                   ...item,
                  type: status
                };
  
      });
     
    },
    changeClientId(val) {
            this.clientId = val;
        },
    handleSizeChange(val){
         this.pageSize=val;
         this.getAlarm();
      },
      handleCurrentChange(val){
        this.currentPage=val;
        this.getAlarm();
      },
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


.rightTop{
  border-bottom: 1px solid #fff ;
  height: 4vh;
  width: 100%;
  line-height: 4vh;
  box-shadow: 0 0 4px #ddd;
  padding-left: 1vw;


}
.rightMiddle{
  margin-top: 1vh;
  border-bottom: 1px solid #fff ;
  height: 5vh;
  width: 100%;
  line-height: 5vh;
  box-shadow: 0 0 4px #ddd;
  padding-left: 1vw;

 
}
.rightBottom{
  margin-top: 1vh;
  height: 77vh;
  width: 95%;
  padding-left: 1vw;
}
.pagination{
  float: left;
  margin-left: 30%;
}
.date{
  float: left;
}
.dateText{
  float: left;
}
.datePicker{
  float: left;
  margin-top: 3px;
}
.mobile{
  float: left;
  margin-left: 2vw;
}
.mobileText{
  float: left;
}
.mobileInput{
  float: left;
}
.select{
  float: left;
  margin-left: 2vw;
}
</style>
